Menú efecto Mouseover con CSS

Hasta no hace mucho yo pensaba que para añadir el efecto Mouseover era necesario hacerlo con javascript, pero he descubierto que también puede hacerse con CSS.
En xyberneticos he visto un menú de vikiworks que me ha gustado mucho, es un sencillo texto con una segunda línea donde podemos añadir una breve descripción.

Lo podemos aplicar a nuestro blog añadiendo unas líneas en los CSS que podrán ser modificadas respecto a color. Nos situamos en nuestra plantilla edición de HTML, justo antes de ]]></b:skin> añadimos lo siguiente:

#menu {margin:0;padding:0; }
#menu ul { margin:0;padding:0; }
#menu ul li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
#menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
#menu li a:hover { color:#ffc300; }
#menu li span { font:11px arial; color:#666; margin:0; }
#menu li span:hover {color:#999;}

Luego añadimos un elemento de página y en HTML/Javascript agregamos:

<div id="menu"><ul>
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li>
</ul></div>

Donde Menu01-Menu02-Menu03 es el texto que visionamos y hace las veces de enlace.
El arterisco ( # ) lo sustituimos por la url de la página que vamos a enlazar.
"Short desc" es el subtitulo, texto o breve descripción que podemos añadir, de no desearlo lo suprimimos.

Hasta ahora vimos páginas donde de forma desinteresada bloggers dedican su tiempo intentando ayudar en la medida que las posibilidades de cada uno le permiten. Me incluyo entre esos bloggers, entre esa gran mayoría que empezaron creando un blog a "ciegas" como se dice en mi tierra.
Sin conocimiento alguno que no fuera llenar un formulario o registrarse en una página. Y es que como ocurre en nuestra vida diaria de los errores se aprende. Paso a paso vamos llenando el blog de trucos, ideas y sugerencias, y a veces... con un poco de suerte alguna que otra solución.

No hay un mejor o peor bloggers, cada uno tiene su espacio, su estilo, y una forma única de comunicarse.
Hay algo en lo que todos coincidimos, hacemos esto porque nos gusta, nos gratifica personalmente, lo hacemos porque queremos sin esperar nada a cambio y como alguna vez dice J.Miur porque nos da la gana.

Hace tiempo dije una frase que La Bloguería la guardó con esmero para recordármela el día que se inició en su blog de ayuda, era algo así como... "El html entra poquito a poco sin darte cuenta, hasta que te enamora" me ocurrió así, y le ocurrió a ella, como le ha ocurrido a Pizcos que con una gran carcajada me lo confirmaba.


Los comienzos de Pizcos fueron creando "El club de los proscritos" de tarde en tarde le surgían algunas dudas que se fueron espaciando, me di cuenta que le gusta "investigar" que va por libre, como también me di cuenta que tiene debilidad por el diseño y se enamoró.

Se enamoró de las formas y colores intentando plasmar en un blog lo aprendido. Su idea es ofrecer ayuda desinteresada para todo aquel que quiera personalizar el diseño de su blog.
Con ilusión y con ánimos para Pizcos doy a conocer "Diseño Blog" donde todos serán bienvenidos.

!Suerte ¡

Pizcos me hablaba el otro día de TJPzoom es un fantástico script que permite hacer zoom sobre las imágenes produciendo un efecto lupa de un aumento considerable.

Intenté añadirlo siguiendo los pasos de las páginas que he encontrado en la red consiguiendo el efecto lupa en la imagen, pero sin conseguir hacer funcionar el efecto para acercar y alejar el zoom.

Después de mucho intentarlo al fin he podido aplicar este efecto en Blogger.

Ingresamos en nuestra plantilla Edición de HTML, localizamos </head> y justo antes añadimos lo siguiente:

<script type='text/javascript'>
//<![CDATA[
Aquí añadimos el contenido del script
//]]>
</script>

El contenido del script podemos copiarlo desde aquí tjpzoom.js

Una vez añadido guardamos los cambios y nos dirigimos a nuestro editor de entradas si es que deseamos añadir el efecto en una entrada, o editamos un nuevo gadget de HTML si deseamos mostrarlo en un gadget. La imagen la mostraremos añadiendo:

<div style="height:300px;">
<div style="position:absolute;">
<img src="url-de-la-imagen" onmouseover="TJPzoom(this);"
style="border:0;padding:0;"/>
</div>
</div>

Donde height:300px; deberemos modificarlo y añadir la altura de nuestra imagen, Naturalmente en url-de-la-imagen los sustituimos por la url de nuestra imagen.

Para aumentar la imagen pulsa el botón izquierdo del ratón y arrástralo hacia arriba, para minimizar pulsa botón izquierdo y arrastra hacia abajo.

Compatible con los siguientes navegadores:
-Internet Explorer 6, 7
-Firefox 2
-Opera (probado en versión 8.54)
-Safari 2
-Konqueror 3.5.6

El próximo 29 de marzo el Fondo Mundial para la Naturaleza (WWF) organiza por segundo año consecutivo una iniciativa que pretende que más de 30 millones de personas colaboren apagando todas las luces y aparatos electrónicos en sus hogares durante una hora como protesta contra el cambio climático y las políticas energéticas.

Tal y como indican en su web, Earth Hour nació el pasado año en Australia y lograron que 2.2 millones de personas y 2.100 empresas de Sydney apagaran sus luces durante una hora. Este masivo esfuerzo colectivo redujo el consumo de energía en un 10.2% durante los 60 minutos que duró, lo que equivale aproximadamente al consumo energético de 48.000 coches durante un año.

La Hora del Planeta pretende demostrar que uniéndonos todos a esta iniciativa podemos conseguir un cambio positivo en la lucha contra el cambio climático.

Además de apagar las luces de 8 a 9 pm el sábado 29 de marzo del 2008 también colaboramos por esta causa si sustituimos focos viejos por focos compactos fluorescentes ahorradores de energía. Así como comprometerse en reducir el consumo de energía.

Divulga esta noticia para que todos tengan conocimiento de ella y súmate a la iniciativa por tu bien y por el de todos.

Fuente: Vagabundia.

Para encontrar un icono ya no tendremos que dar mil vueltas, con el buscador SearchIcon todo será más fácil. Encontraremos nada menos que 61.225 iconos de diferentes tamaños 16x16 - 22x22 - 32x32 - 48x48 - 64x64 - 72x72 - 96x96 - 128x128

En Befunky podemos encontrar Cartoonizer es una herramienta para crear caricaturas. Todo lo que tienes que hacer es subir la imagen y empezar a utilizar la herramienta para deformar, dibujar o dar color a la caricatura. También podemos agregar a la imagen marcos, texto y accesorios.

Hay otra opción a la que podemos acceder desde nuestra galería y clicando en Print Product, se trata de una serie de productos donde nos muestra como quedarían con nuestra imagen grabada informando del precio en el caso de desear adquirirlos.

Las imágenes que obtenemos inmediatamente van a formar parte de la galería que podéis ver en la página principal de Befunky podemos optar porque nuestra imagen sea de carácter privado o publico.

A veces descubro páginas de interés y gran utilidad (al menos para mi) y pienso que esa es la mejor página, hasta que descubro otra que supera con creces la anterior.
Es lo que me ha pasado con Font Tester un sitio donde nos genera el código CSS para las fuentes de nuestro blog


Podemos visualizar hasta en tres paneles diferentes a fin de comparar los resultados. Probar color de fondo, tamaño, tipo de letra o alineación puede llegar a ser hasta divertido.
Una vez estamos contentos con el resultado bastará con clicar el texto Get CSS Code del panel y copiamos el código que proporciona (CSS Code) o clicamos en Select All

Cuando ya tenemos añadido ese código a la plantilla tenemos la opción de añadirlo tipo HTML en las entradas o sidebar. Para ello bastará con envolver el texto con <p class="example"> texto-texto-texto- </p> y obtendremos el efecto conseguido en Font Tester.

Un ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam lectus justo, porttitor ac, ullamcorper ac, cursus in, ante. Duis mi ante, sodales in, auctor vel, vehicula eget, sapien. Proin iaculis dui vitae leo. Integer blandit tempus leo. Morbi turpis. Suspendisse turpis. Nulla eget leo. Cras interdum sollicitudin ante. Sed placerat scelerisque magna. Vestibulum rutrum nibh a eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque nonummy, lorem non elementum consequat, velit diam iaculis erat, eget venenatis neque dui sed ligula.

Fuente despuesdegoogle

En Nerdbusiness he descubierto una maravillosa selección de iconos para Web con sus correspondientes enlaces a la página del autor, estoy segura que los enamorados del diseño sabrán darle utilidad inmediatamente.
Algunos son de gran tamaño, estuve probando y decidí personalizar las carpetas de mi PC de forma que la imagen se asocia con el contenido siendo la búsqueda más rápida.


Hasta la actualización el número de iconos es de 5.978 iconos, suficientes como para no encontrar algunos de nuestro agrado.

Premio Calidez

He tardado en escribir esta entrada y quiero pedir disculpas por ello a mi preciado amigo el Dr. Gnómegang.
Entre todos los premios recibidos este tiene un sabor especial, es un premio otorgado a aquellos blogs que proporcionan "Calidez" a sus visitantes. Me ha asombrado porque es muy difícil entre códigos y widgets percibir algo que yo ignoraba transmitir.
Mil gracias Dr Gnómegang y felicidades igualmente por ser receptor de este premio.

Así mismo me llega otro premio Calidez, esta vez de la mano de Leonardo a quien agradezco igualmente el detalle y pido disculpas por la tardanza en responder. Felicidades también Leonardo.

Miranda del blog "A quien le amarga un dulce" me otorga el premio Calidez con estas palabras:
A Gem@ su blog de trucos y ayuda a blogeros se encuentra, creo, en todos los premios que he otorgado, porque realmente los merece, y éste no es menos, pues el apoyo que ofrece es constante y su forma de hacerlo, agradable, cercana y simpática, en resumen: cálida.

Gracias Miranda y felicitaciones igualmente.

Gracias mil

Descubrir plantillas para Blogger era una tarea complicada, por suerte ya tenemos un gran surtido disponibles y no sólo eso sino que algunas han sido adaptadas para Blogger como es el caso de Francisco de Blogandweb. No queda ahí el tema plantillas y Francisco en su afán de hacernos la búsqueda de plantillas más amena y divertida ha creado BTemplates.

En BTemplates encontraremos más de 200 diseños para descargar y promete una actualización constante. La navegación funciona de acuerdo a la temática o por las propiedades del diseño, informando si es adaptación o no de Wordpress.
La descarga es directa sin registros y ofrece la posibilidad de votar y comentar así como ver qué plantillas son las más descargadas.

Ya sólo queda visitar BTemplates y subcribirse a su feed para recibir las actualizaciones con los últimos diseños.

Eliminar los iconos del blogroll de Blogger es muy sencillo, tenemos la opción dejando sin marcar la casilla "icono"

Pero si tenéis problemas como me comentaron en un e-mail también podemos eliminarlo de la siguiente forma:
Debemos dirigirnos a plantilla Edición de HTML y Expandir plantillas de artilugios.
Localizaremos el título que añadimos a nuestro Blogroll.(por defecto viene como "Mi lista de blogs"
Una vez localizado veremos unas líneas más abajo donde dice:

<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<img alt='' expr:src='data:item.blogIconUrl' height='16' onerror='this.style.visibility="hidden"' width='16'/>
</b:if>
</div>

Eliminaremos lo que se encuentra en negrita y el icono de Blogger habrá desaparecido, aún así mira en vista previa el resultado.

Si deseamos personalizarlo respecto a colores bajamos un poco más hasta llegar a:

<!-- Apply custom colors found on template. -->

Vamos a sustituir <data:linkColor/> y <data:textColor/> por los colores escogidos para el blogroll (ejemplo:#B0171F)

.blog-list-container a:link {
color:<data:linkColor/>; "Enlaces"

.blog-list-container .item-title {
color:<data:textColor/>; "Título"

.blog-list-container .item-snippet {
color:<data:textColor/&gt;; "Texto de la noticia"

.blog-list-container .item-time {
color:<data:textColor/>; "Tiempo de la actualización"

Nueva página descubierta en Xyberneticos ¿no es tan nueva? yo no la conocía así que ahí va.
FaceInHole es ante todo un lugar de entretenimiento, lo que algunos llaman perder el tiempo pero si nos hartamos a reír bien vale la pena.
Consiste en una galería de escenarios con personajes famosos, escogemos una imagen de la galería en "Browse Scenarios" y subimos nuestra foto desde nuestro PC en "Image file (JPG)" también podemos obtener una foto con nuestra Webcam clicando en "Webcam"
Una vez subida podemos usar las herramientas para redimensionar, rotar, ajustar color, brillo...
Los efectos son muy conseguidos y como decía la risa está asegurada.

Hace tiempo hice una entrada proporcionado un script que al mismo tiempo que inhabilita el botón derecho mostraba un mensaje de aviso.
Este es sin mensaje de aviso, de todas formas y como dije en la anterior entrada estos scripts evitan copiar y guardar pero hay otras formas de apoderarse del contenido de la plantilla.

Para instalarlo nos situamos en Plantilla/Añadir un elemento de página/HTML Javascript y en su interior añadimos lo siguiente:

<script language="JavaScript1.2">
function disableselect(e){
return false
}

function reEnable(){
return true
}

//if IE4+
document.onselectstart=new Function ("return false")

//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Todo tuyo Paco

Me he decidido a cambiar de buscador, cada vez que accedía al blog de J.Miur me quedaba pensando en lo práctico que resulta acceder a las búsquedas en la misma página, sin salir del blog. Así que sin pensarlo dos veces puse manos a la obra y como siempre que se trata de un widget resulta supersencillo.
Para añadir este buscador debemos acceder a nuestro blog por Blogger in Draft
En elementos de página buscaremos "Caja de búsqueda"



Clicamos en "ADD TO BLOG" o lo que es lo mismo "Añadir al blog" nos muestra el lugar donde debemos marcar según las preferencias.

Si tenemos en nuestro blog el widget de "Lista de vínculos" y marcamos la casilla "Internet" también tendremos la oportunidad de realizar búsqueda en los vínculos añadidos.

Si lo único que deseamos mostrar es una búsqueda interna de nuestro blog bastará marcar "Este blog" en "En Acceso desde aquí" mostrará todas las páginas a las que tuvimos acceso desde las entradas del blog.

Inmediatamente que guardamos los cambios el buscador se instala en la sidebar, desde plantilla de diseño bastará con arrastrar la etiqueta hasta el lugar deseado.

El código del buscador es personalizable respecto a colores, para ello debemos expandir nuestra plantilla y buscar el código, lo podemos hacer pulsando las teclas control+f y añadiendo :

<!-- override gsearch.css -->

Lo que se encuentra entre <style type='text/css'> y </style> es el script, si deseamos modificarlo recomiendo guardar antes copia de la plantilla por si cometiéramos algún error.

Lo que yo hice fue copiar lo que se encuentra "dentro" del script y añadirlo a los CSS justo antes de ]]></b:skin> para facilitar su localización, una vez ahí fui probando colores hasta obtener el resultado.

Este es el ejemplo de mi buscador:

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {color:#000;background: #ccc;padding:0 15px;line-height:20px;height:20px;margin:10px 0 5px 0;text-decoration:none;}
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {color#000;text-decoration:none;}
#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {color: #940f04;font-size:10px;}
#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {color: #940f04;}
#uds-searchControl .gsc-results {border-color: #940f04;background-color: #F5F5F5;}
#uds-searchControl .gsc-tabhActive {border-color: #940f04;border-top-color: #940f04;background-color: #F5F5F5;color: #000;}
#uds-searchControl .gsc-tabhInactive {border-color: #940f04;background-color: transparent;color: #000;}
#uds-searchClearResults {border-color: #940f04;}
#uds-searchClearResults:hover {border-color: #940f04;}
#uds-searchControl .gsc-cursor-page {color: #000;text-decoration:none;}
#uds-searchControl .gsc-cursor-current-page {color: #940f04;}
#uds-searchControl .gsc-results .gsc-cursor-box .gsc-trailing-more-results {color:#000;text-decoration:none;background:none;}
input.gsc-input {border-color: #ccc;}
input.gsc-search-button {background:transparent url(URL-IMAGEN) no-repeat scroll 0 0;color:#ccc; border-color: #ccc;}
</style>

No sé si lleva tiempo en la red pero no lo había visto, se trata de Listamatic2, en su día hablamos de Listamatic donde con un sencillo copiar y pegar conseguimos un menú, podemos modificar los colores y con un poco de imaginación darle un toque diferente.
Listamatic2 ofrece varios tipos de menús horizontales y verticales. Basta con copiar el código CSS y pegarlo justo antes de ]]></b:skin>
Donde dice HTML lo agregamos como un elemento de página HTML/Javascript.
El texto que deseamos sea visible lo añadiremos sustituyendo "Item two" donde asterisco "#" pegaremos la url que deseamos enlazar.
Es muy sencillo y rápido de implementar en nuestro blog, para el ejemplo añadí uno a mi blog de pruebas, escogí "Borders and Indents" Ver efecto.

He descubierto una página, se trata de SMASHING MAGAZINE y la he descubierto gracias a Miranda que entre otras cosas me dijo...

"Me ha resultado muy interesante,creo que sería ideal que la compartieses con todos tus visitantes. Se trata de la revista Smashing Magazine, que ofrece 45 imágenes de cabecera (de 850x200px) para blogs totalmente gratuitas"

Tiene mucha razón y según he visto es más que interesante porque además de las imágenes tipo logo podemos encontrar tutoriales ....







Datos y enlaces que nos ayudarán a crear menús de navegación y un gran surtido de iconos muy originales.

También encontraremos texturas y una interminable lista de la que estoy segura sacaréis alguna utilidad o idea para vuestro blog.

He encontrado dos inconvenientes, la página está en inglés pero con un traductor de páginas Web podemos solucionarlo. El otro inconveniente es que podemos pasar horas y horas yendo de un sitio a otro sin apenas darnos cuenta.

Gracias Miranda ;)